import QtQuick 2.4
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.3

Rectangle {
    Layout.fillWidth: true
    Layout.fillHeight: true
    //height: 200
    color: "#08BEF3"

    ListView {
       id: list
      anchors.fill: parent
      clip : true
      Component.onCompleted: positionViewAtBeginning()

        header: Rectangle {
           // width: 20
            //Layout.fillWidth: true
            //anchors.fill: parent
            width: parent.width
            height: 20
            Text {
                text: "header"
            }
            color: "green"

        }
        headerPositioning: ListView.PullBackHeader

        footer : Rectangle {
            width: parent.width
            height: 20
            color: "green"
            Text {
                text: "上滑加载更多"
            }

             ListView.onRemove: {}
        }
        footerPositioning: ListView.PullBackFooter

        Component {
            id: contactsDelegate

            Rectangle {
                id: wrapper
                width: parent.width + parent.width * .20
                height: contactInfo.height
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        listModel.append({name: "Bill Smith"})
                        list.currentIndex = index
                    }
                    onDoubleClicked:  { listModel.remove(index) }

                    drag.target: wrapper
                    drag.axis: Drag.XAxis
                    drag.minimumX: -list.width * .20
                    drag.maximumX: 0
                }

                color: ListView.isCurrentItem ? "black" : "red"
                Text {
                    id: contactInfo
                    text: name + "\n " + number + "\n" + txt
                    color: wrapper.ListView.isCurrentItem ? "red" : "black"
                }

                ListView.onRemove: SequentialAnimation {
                    PropertyAction { target: wrapper; property: "ListView.delayRemove"; value: true }
                    NumberAnimation { target: wrapper; property: "scale"; to: 0; duration: 250; easing.type: Easing.InOutQuad }
                    PropertyAction { target: wrapper; property: "ListView.delayRemove"; value: false }
                }

                Rectangle {
                    color:  "white"
                    width: list.width * .20
                    height: parent.height
                    anchors.bottom: parent.bottom
                    anchors.right: parent.right
                    Text {
                        anchors.centerIn: parent
                        text: "删除"
                        color: "black"
                    }

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            listModel.remove(index)
                        }
                    }
                }
            }
        }

        model:  ListModel {
            Component.onCompleted: {
                for (var i = 0; i < 10; ++i) {
                    append({name: i.toString()});
                }
            }
            id: listModel
            ListElement {
                name: "Bill Smith"
                number: "555 3264"
                txt: "adf"
            }
            ListElement {
                name: "John Brown"
                number: "555 8426"
            }
            ListElement {
                name: "Sam Wise"
                number: "555 0473"
            }
        }

        delegate: contactsDelegate
        focus: true

       /*property var needReflesh : false
        onMovementEnded: {
            if (needReflesh) {
                var c = "a";
            }

        }
        onMovementStarted: {
            needReflesh = false
        }

        onContentYChanged: {
            // 下拉刷新判断逻辑：已经到头了，还下拉一定距离
            if (contentY < originY) {
                var dy = contentY - originY;
                if (dy < -10) {
                    //lv.headerItem.goState('ready');
                    needReflesh = true;
                }
                else {
                    if (pressed) {
                        needReflesh = false;   // 如何判断当前鼠标是否按下？如果是按下状态才能取消刷新
                    }
                }
            }
        }*/
    }
}

